<template>
  <div>
    <!-- 
      当显示SpuList组件，不禁用
      当显示AddOrUpdateSpu 或 AddSku 组件，禁用
     -->
    <CategorySelector :disabled="isShow !== 1" />
    <!-- 

      两个组件切换显示：SpuList、AddOrUpdateSpu
        isShowSpuList: boolean 可以满足两个组件切换显示
      
      三个组件切换显示：SpuList、AddOrUpdateSpu、AddSku
        isShowSpuList: 1（SpuList）、2（AddOrUpdateSpu）、3（AddSku）
     -->
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" />
    <AddOrUpdateSpu v-else-if="isShow === 2" @setIsShow="setIsShow" />
    <AddSku v-else @setIsShow="setIsShow" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SpuList from "./components/SpuList.vue";
import AddOrUpdateSpu from "./components/AddOrUpdateSpu.vue";
import AddSku from "./components/AddSku.vue";

defineOptions({
  name: "Spu",
});

const isShow = ref(1);

const setIsShow = (val: number) => {
  isShow.value = val;
};
</script>

<style scoped lang="scss"></style>
